{layout name="./header" /}


<div class="layui-body" style="bottom: 0;border-left: solid 2px #1AA094;" id="container">
    <div class="layui-tab admin-nav-card layui-tab-brief" lay-filter="admin-tab">
        <div class="demoTable">
            问题名称:
            <div class="layui-inline">
                <input class="layui-input" name="id" id="demoReload" autocomplete="off" placeholder="问题名称">
            </div>
            <button class="layui-btn" data-type="reload">搜索</button>
            <button class="layui-btn" data-type="removeSelected">删除选中</button>
            <a class="layui-btn" data-type="add">增加</a>
        </div>
        <div class="layui-tab-content" style="min-height: 150px; padding: 5px 0 0 0;">
            <div class="layui-tab-item layui-show">
                <table id="demo"  lay-filter="demo" ></table>
            </div>
        </div>
    </div>
</div>
<script src="__STATIC__/plugins/layui/layui.js"></script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use('table', function(){
        var table = layui.table;
        var $=layui.$;
        //方法级渲染
        var height=$('.layui-body').height();
        var demoTable=table.render({
            elem: '#demo',
            height:height
            ,url: '{:url("question/index")}'
            ,cellMinWidth:120 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[ //表头
                {checkbox: true}
                ,{field: 'id', title: 'ID', width:120, sort: true}
                ,{field: 'name', title: '问题名称', width:220 ,edit: 'text'}
                ,{field: 'type', title: '问题类型', width:220, sort: true}
                ,{fixed: 'right',title:'操作', width:'250', align:'center', toolbar: '#barDemo'}
            ]]
            ,id: 'testReload'
            ,page: true
        });
        table.on('tool(demo)',function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('确认删除行么？', {icon: 3, title:'提示'}, function(index){
                    var id=data.id;
                    $.post('{:url("question/del")}',{ids:[id]},function(respance){
                        console.log(respance);
                        if(respance.code=='200'){
                            layer.msg(respance.msg);
                            layer.close(index);
                            demoTable.reload();
                        }
                    })
                });
            }
            else if(obj.event === 'edit'){
                layer.open({
                    type: 2,
                    maxmin: true,
                    content: 'edit.html?id='+data.id,
                    area: ['800px', '500px'],
                    offset: '100px',
                    end:function(){
                        demoTable.reload();
                    }
                });

            }
        });

        //监听单元格编辑
        table.on('edit(demo)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
            $.post('{:url("question/edit")}',{id:data.id,field:value,name:field},function(respance){
                layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
            });

        });



        //搜索
        var  active = {
            reload: function(){
                var demoReload = $('#demoReload');
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        key: {
                            name: demoReload.val()
                        }
                    }
                });
            },
            add:function(){
                var index=layer.open({
                    type: 2,
                    maxmin: true,
                    content: 'add.html',
                    area: ['800px', '500px'],
                    offset: '100px',
                    shadeClose:true,
                    end:function(){
                        demoTable.reload();
                    }
                });
                var form = layui.form;
                form.on('submit(formDemo)', function(data){
                    layer.closeAll();
                    $.post('{:url("question/edit")}',data.field,function(res){
                        if(res.code=='200'){
                            layer.closeAll();
                        }
                    });
                });
            },
            removeSelected:function(){
                layer.confirm('确认删除选中？', {icon: 3, title:'提示'}, function(index){
                    var data=table.checkStatus('testReload').data;
                    var ids=[];
                    data.forEach(function(d){
                        ids.push(d.id);
                    },data);
                    $.post('{:url("question/del")}',{ids:ids},function(respance){
                        console.log(respance);
                        if(respance.code=='200'){
                            layer.msg(respance.msg);
                            layer.close(index);
                            demoTable.reload();
                        }
                    })
                });
            }
        };
        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>


